<template>
	<div class="into">
		<div class="topTitle">
			<span style="color:#5cd9e8">
				<svg-icon icon-class="stotop"></svg-icon>
			</span>
			<span class="fs-xl text mx-2">今日任务完成情况</span>
		</div>
		<div class="content">
			<dv-capsule-chart :config="config" style="height:80%" />
		</div>

	</div>
</template>

<script>
	const echarts = require("echarts");
	import api from '@/http/api'
	export default {
		data() {
			return {
				config: {
					data: [{
							name: '入库',
							value: ''
						},
						{
							name: '移库',
							value: ''
						},
						{
							name: '出库',
							value: ''
						},
						{
							name: '盘点',
							value: ''
						},

					],

					/* activeRadius: "70%",
					showOriginValue: true,
					radius: "60%", */
					/*unit: '单位',*/
					/* colors: ['#d0d0d0', '#676fd3', '#f8ff61', '#ff9b29', '#d33e04', '#9a046d'] */
				}
			};
		},
		mounted() {
			/* this.fetchData() */
		},
		created() {
			this.getDataList()
		},
		methods: {
			fetchData() {
				//首页异常监控
				this.$http.get('/API/visualization', ).then(response => {
					let alarm = "";
					console.log(response)
					if (response.code === 0) {
						alarm = response.data.severities;
						let config = [];
						config = this.config.data;
						config[0].value = alarm.pa;
						config[1].value = alarm.MV;
						config[2].value = alarm.PICK;
						config[3].value = alarm.CC;
						config[4].value = alarm.high;
						config[5].value = alarm.disaster;
						/**
						 * 使用ES6拓展运算符生成新的props对象
						 * 组件侦知数据变化 自动刷新状态
						 */
						this.config = {
							...this.config
						}
						setTimeout(this.fetchData, 60000);

					}


				})
			},
			getDataList: function() {
				this.$http.get('/API/visualization', ).then((response) => {
					if (response.data.code == 0) {
						let config = [];
						config = this.config.data;
						config[0].value = response.data.data.pa;
						config[1].value = response.data.data.MV;
						config[2].value = response.data.data.PICK;
						config[3].value = response.data.data.CC;
						this.config = {
							...this.config
						}
						setTimeout(this.getDataList, 60000);
					}

				})
			}
		}


		,
		destroyed() {
			window.onresize = null;
		}
	}
</script>

<style lang="scss" scoped>
	.into {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.topTitle {
			height: 10%;
			padding-top: 15px;
		}

		.content {
			flex: 2;
		}
	}
</style>
